<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ldl</title>
    <style>
        .container-dl {
            margin: 10px auto;
        }
        .box-dl {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px 10px;
            background-color: #eee;
            margin-bottom: 10px;
            min-height: 30px;
        }
        .box-dl .title-dl {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .box-dl .box-content-dl {

        }

        .txt-1-dl {
            width: fit-content;
            background-color: #333;
            color: #fff;
            /* 浏览器直接访问存在跨域问题 */
            mask-image: url(./assets/kv-mask.png);
            mask-repeat: no-repeat;
            mask-size: 50px 50px;
            mask-position: 0 50%;

            height: 50px;
            line-height: 50px;
            font-weight: bold;
            padding-left: 18px;
            padding-right: 4px;

            animation: m1 3s linear both;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            letter-spacing: 20px;
        }
        @keyframes m1 {
            0% {
                mask-position: 0 50%;
            }
            100% {
                mask-position: 100% 50%;
            }
        }
        .txt-2-dl {
            display: inline-block;
            letter-spacing: 5px;
            height: 40px;
            line-height: 40px;
            color: #333;

            padding-right: 90px;
        }
        .txt-show-1-dl {
            /* background-color: #fff; */
            mask-image: url(./assets/btn1.png);
            mask-size: 0px 40px;
            mask-repeat: no-repeat;
            mask-position: -40px 50%;
            animation: m2 2s linear both;
        }
        .agin1-dl {
            animation-name: none;
        }
        .txt-show-1-dl.d1 {
            animation-delay: 0.1s;
        }
        .txt-show-1-dl.d2 {
            animation-delay: 2s;
        }
        @keyframes m2 {
            0% {
                mask-size: 0px 40px;
            }
            100% {
                mask-size: 100% 40px;
            }
        }
    </style>
</head>
<body>
    <div class="container-dl">
        <div class="box-dl">
            <div class="title-dl">mask-image demo1</div>
            <div class="box-content-dl">
                <div class="txt-1-dl">测试1234567890</div>
            </div>
        </div>

        <div class="box-dl">
            <div class="title-dl">mask-image demo2</div>
            <div class="box-content-dl">
                <button onclick="doAgain1()" >again</button>
                <hr>
                <div class="txt-2-dl txt-show-1-dl d1">测试1234567890测试1234567890</div>
                <br>
                <div class="txt-2-dl txt-show-1-dl d2">测试1234567890测试1234567890</div>
            </div>
        </div>

    </div>

    <script>
        function doAgain1() {
            let arr = document.querySelectorAll('.txt-2-dl');
            for(let i=0;i<arr.length;i++) {
                arr[i].classList.add('agin1-dl');
            }
            setTimeout(()=>{
                for(let i=0;i<arr.length;i++) {
                    arr[i].classList.remove('agin1-dl');
                }
            }, 100);
        }
    </script>
</body>
</html>